<script setup>
import { reactive } from 'vue';

const state = reactive({
    list: [
        { id: 1, name: '吃饭', flag: true },
        { id: 2, name: '睡觉', flag: false },
        { id: 3, name: '打豆豆', flag: true },
    ],
})
</script>

<template>
    <section class="todoapp">
        <header class="header">
            <h1>todos</h1>
            <input class="new-todo" placeholder="What needs to be done?" autofocus />
        </header>

        <section class="main">
            <input id="toggle-all" class="toggle-all" type="checkbox" />
            <label for="toggle-all">Mark all as complete</label>
            <ul class="todo-list">
                <li :class="{
                    // 右边为 true 就使用左边的 class
                    completed: item.flag
                }" v-for="item in state.list" :key="item.id">
                    <div class="view">
                        <input class="toggle" type="checkbox" v-model="item.flag" />
                        <label>{{item.name}}</label>
                        <button class="destroy"></button>
                    </div>
                    <input class="edit" value="Create a TodoMVC template" />
                </li>
            </ul>
        </section>

        <footer class="footer">
            <span class="todo-count"><strong>0</strong> item left</span>
            <ul class="filters">
                <li>
                    <a class="selected" href="#/">All</a>
                </li>
                <li>
                    <a href="#/active">Active</a>
                </li>
                <li>
                    <a href="#/completed">Completed</a>
                </li>
            </ul>
            <button class="clear-completed">Clear completed</button>
        </footer>
    </section>
</template>